<!doctype <!DOCTYPE html>
<htm>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>表单测试</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
            crossorigin="anonymous">
        <style lang="scss">
            @media (max-width: 575.98px) {
                label {
                    text-align: left;
                }
            }

            @media (min-width: 576px) {
                label {
                    text-align: right;
                }
            }
        </style>
    </head>

    <body>
        <div class="container"></div>
        <form id="form1" onsubmit="onSubmit">
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Family Name</label>
                <div class="col-sm-8">
                    <input type="text" id="familyName" class="form-control" placeholder="Family Name">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Given Name</label>
                <div class="col-sm-8">
                    <input type="text" id="givenName" class="form-control" placeholder="Given Name">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Date</label>
                <div class="col-sm-8">
                    <input type="date" id="date" class="form-control" placeholder="Given Name">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Time</label>
                <div class="col-sm-8">
                    <input type="time" id="date" class="form-control" placeholder="Given Name">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Gender 性别</label>
                <div class="col-sm-8" style="margin-top:7px;">
                    <div class="row">
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gender" id="gridRadios1" value="Male" checked="checked">
                                <label class="form-check-label" for="gridRadios1">
                                    Male 男
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gender" id="gridRadios2" value="Female">
                                <label class="form-check-label" for="gridRadios2">
                                    Female 女
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Guest Speech in the Morning
                    <br />上午启动仪式和嘉宾分享</label>
                <div class="col-sm-8" style="margin-top:7px;">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="morning">
                        <label class="form-check-label" for="morning">Attend 参加</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">New Economy Sub-Forum
                    <br />下午新经济分论坛
                    <br>Please Select 请选择一项</label>
                <div class="col-sm-8" style="margin-top:7px;">

                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="forum" id="afternoonRadios1" value="Biotech Forum 生物科技论坛">
                                <label class="form-check-label" for="afternoonRadios1">
                                    Biotech Forum 生物科技论坛
                                </label>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-12">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="forum" id="afternoonRadios2" value="Green Economy Forum 绿色经济论坛">
                                <label class="form-check-label" for="afternoonRadios2">
                                    Green Economy Forum 绿色经济论坛
                                </label>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-12">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="forum" id="afternoonRadios3" value="Digital Economy Forum 数字经济论坛">
                                <label class="form-check-label" for="afternoonRadios3">
                                    Digital Economy Forum 数字经济论坛
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="forum" id="afternoonRadios4" value="Creative Economy Forum 创意经济论坛">
                                <label class="form-check-label" for="afternoonRadios4">
                                    Creative Economy Forum 创意经济论坛
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Gala Dinner 晚宴</label>
                <div class="col-sm-8" style="margin-top:7px;">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="dinner">
                        <label class="form-check-label" for="dinner">Attend 参加</label>
                    </div>

                    <div class="form-check" v-if="form.dinner">
                        <input type="radio" class="form-check-input" name="dinner" checked value="Standard" id="standard">
                        <label class="form-check-label" for="standard">Standard 普通</label>
                    </div>
                    <div class="form-check" v-if="form.dinner">
                        <input type="radio" class="form-check-input" name="dinner" value="Vegetarian" id="vegetarian">
                        <label class="form-check-label" for="vegetarian">Vegetarian 素食</label>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit 提交</button>
        </form>
        <script>
            if (localStorage.familyName)
                document.getElementById("familyName").value = localStorage.familyName
            document.getElementById("form1").addEventListener("submit", onSubmit);

            function onSubmit(e) {
                // e.stopPropagation(); 

                let form = document.getElementById("form1");
                // localStorage.familyName = document.getElementById('familyName').value;
                localStorage.setItem('familyName', document.getElementById('familyName').value);
                e.preventDefault();
                console.log(form)
                return false;
            }
        </script>
    </body>

</html>